<template>
  <div class="workList">
    <!-- 顶部表单 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item label="作业名称">
        <el-input v-model="formInline.jobNname" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="jobName" label="作业名称" align="center">
      </el-table-column>
      <el-table-column prop="completedNumber" label="完成人数" align="center">
      </el-table-column>
      <el-table-column prop="uncompletedNumber" label="未完成人数" align="center">
      </el-table-column>
      <el-table-column prop="completion" label="完成率" align="center">
      </el-table-column>
      <el-table-column prop="check" label="待批改" align="center">
      </el-table-column>
      <el-table-column prop="checkRate" label="批改率" align="center">
      </el-table-column>
      <el-table-column prop="passNumber" label="及格人数" align="center">
      </el-table-column>
      <el-table-column prop="goodNumber" label="优秀人数" align="center">
      </el-table-column>
      
    </el-table>
  </div>
</template>

<script>
export default {
  name: "WorkList",
  props: [""],
  data() {
    return {
      tableData: [], 
      formInline: {
        jobNname: "",
      },
    };
  },

  components: {},

  computed: {},

  created() {
     this.getData()
  },

  mounted() {},

  methods: {
    //获取数据
     getData() {
      this.servers
        .get("/work")
        .then((res) => {
          // console.log(res);
          if (res.status == 200) {
            this.tableData = [res.data.data];
          }
        })
        .catch((err) => {
          console.log(res);
        });
    },
    //查询的方法
    find(){
      console.log(this.formInline);
    },
  },
};
</script>
<style scoped lang='less'>
.worktList {
  .el-select {
    width: 100%;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>